<template>
  <div class="app-flex app-column app-height-100wh">
    <div class="app-v-center app-word-nowrap app-z-index-100" style="background: #545c64">
      <div class="px-3 app-v-center app-h-end app-h-56px app-fill-width" style="color: #fff;">
        <div class="px-6 app-font-14 app-flex-1 app-v-center">{{ '客户管理ERP系统' }} <i :class="isCollapse? 'el-icon-s-unfold': 'el-icon-s-fold' " class="app-font-24 ml-6 app-pointer" @click="isCollapse=!isCollapse" /></div>
        <div class="app-v-center mr-3 pt-1">
          {{ userInfo && userInfo.mobile }}
        </div>
        <div class="right-menu">
          <el-dropdown class="avatar-container" trigger="hover">
            <div class="pr-5 app-v-center app-pointer" style="color: #fff;">
              {{ userInfo && userInfo.name }}<i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown">
              <router-link to="/">
                <el-dropdown-item>
                  Home
                </el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click.native="logout">
                <span style="display:block;">退出</span>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="editPassword">
                <span style="display:block;">修改密码</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <router-view :is-collapse="isCollapse" />
    <el-dialog
      title="修改密码"
      :visible.sync="passwordDialog"
      width="30vw"
    >
      <el-form ref="form" :model="form" label-width="60px">
        <el-form-item prop="oldPassword" label="原密码:">
          <el-input v-model="form.oldPassword" :type="passwordType1">
            <i slot="suffix" class="el-icon-view app-pointer" @mousedown="passwordType1='text'" @mouseout="passwordType1='password'" />
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码:">
          <el-input v-model="form.newPassword" :type="passwordType2">
            <i slot="suffix" class="el-icon-view app-pointer" @mousedown="passwordType2='text'" @mouseout="passwordType2='password'" />
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="passwordDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { clearCookies } from '@/utils/auth'
import { updateUser } from '@/api/user'
export default {
  data: () => ({
    tab: 0,
    rules: {
      oldPassword: [
        { required: true, message: '请填写原密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请填写新密码', trigger: 'blur' }
      ]
    },
    isCollapse: false,
    backMenu: false,
    userInfo: null,
    passwordType1: 'password',
    passwordType2: 'password',
    passwordDialog: false,
    form: {
      oldPassword: '',
      newPassword: ''
    }
  }),
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'username',
      'userId'
    ])
  },
  mounted() {
    if (localStorage.getItem('userInfo')) {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      // getMenu().then(res => {
      //   this.backMenu = res.data.some(m => m.name === '系统管理')
      // })
    } else {
      this.logout()
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateUser(this.form).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.form = {
                oldPassword: '',
                newPassword: ''
              }
              this.passwordDialog = false
            }
          })
        }
      })
    },
    editPassword() {
      this.passwordDialog = true
    },
    async logout() {
      clearCookies()
      localStorage.clear()
      sessionStorage.clear()
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$router.push(`/login`)
    },
    toBackStage() {
      this.$router.push({ name: 'orgUser' })
    }
  }
}
</script>

<style scoped lang="scss">
.top-container {
  border-radius: 0 0 15px 15px;
}
.left-part {
  width: 400px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/*滚动条样式*/
::-webkit-scrollbar {
    width: 0px;
    /*height: 4px;*/
}
</style>
